<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <el-container direction="vertical">
            <el-header>
                <h1>国宾旅游平台</h1>
            </el-header>
            <el-container direction="horizontal">
                <el-aside>
                    <!-- Aside content -->
                    <el-menu default-active="" @select="">
                        <el-submenu v-for="(submenus, index) in menus" :index="index + 1" :key="submenus.key">
                            <template slot="title">{{submenus.title}}</template>
                            <el-menu-item v-for="(item, subIndex) in submenus.menus"
                                :index="(index + 1) + '-' + (subIndex + 1)" :key="item.key">
                                <el-link type="primary" style="display: block;" :underline="false" :href="item.link"
                                    target="main">{{item.title}}</el-link>
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>

                </el-aside>
                <el-container direction="vertical">
                    <el-main>
                        <!-- 嵌入其他页面 -->
                        <iframe style="width: 100%; height: 100vh;" src="item.html" name="main" frameborder="0"
                            scrolling="no"></iframe>
                    </el-main>
                    <el-footer>
                        <!-- Footer content -->
                    </el-footer>
                </el-container>
            </el-container>
        </el-container>

    </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                menus: [
                    {
                        title: '旅行项目',
                        key: '1',
                        menus: [
                            {
                                title: '自由行',
                                key: '1.1',
                                link: 'item.html'
                            },
                            {
                                title: '跟团游',
                                key: '1.2',
                                link: 'order.html'
                            },
                            {
                                title: '业绩统计',
                                key: '1.3',
                                link: 'report.html'
                            },
                        ]
                    },
                    {
                        title: '预约服务',
                        key: '1',
                        menus: [
                            {
                                title: '团购项目',
                                key: '1.1',
                                link: 'item.html'
                            },
                            {
                                title: '预约',
                                key: '1.2',
                                link: 'order.html'
                            },
                        ]
                    },
                ]
            }
        },
    })
</script>

</html>